<template>
  <div class="table-container">
    <Table ref="table" :columns="columns" :data="data"
           :loading="loading" @on-selection-change="selectChange"
           highlight-row>
      <template slot-scope="{ row, index }" slot="action">
        <Button @click="showEditModel(row)">编辑</Button>
        <Poptip transfer
                confirm
                title="确定删除？"
                @on-ok="deleteRow(row)">
          <Button type="error" style="margin-left: 10px;">删除</Button>
        </Poptip>
      </template>
      <template slot-scope="{ row, index }" slot="status">
        <span v-html="statusMap[row.isValid]"></span>
      </template>
    </Table>
    <div class="page-container">
      <Page
        @on-change="sizeChange"
        @on-page-size-change="currentChange"
        :current="pageInfo.pageNumber"
        :page-size-opts="[10, 20, 30]"
        :page-size="pageInfo.pageSize"
        show-sizer show-elevator
        :total="pageInfo.total">
      </Page>
    </div>
  </div>
</template>
<script>
import {
  list,
  remove,
} from '@/api/configApi'

export default {
  props: {
    searchForm: Object
  },
  data() {
    this.statusMap = {
      '-1': '<span style="color: red">已删除</span>',
      '0': '<span style="color: gray">前台不展示</span>',
      '1': '<span style="color: black">前后台都展示</span>'
    }
    return {
      loading: false,
      data: [],
      selectedRows: [],
      columns: [{
        type: 'selection',
        width: 60,
        align: 'center'
      }, {
        title: '操作',
        align: 'center',
        slot: 'action',
        width: 200
      },
        {
          title: 'ID',
          align: 'center',
          key: 'id'
        },
        {
          title: 'Key',
          align: 'center',
          key: 'configKey'
        },
        {
          title: '分组',
          align: 'center',
          key: 'configType'
        },
        {
          title: '描述',
          align: 'center',
          key: 'configDesc'
        },
        {
          title: '缓存时间',
          align: 'center',
          key: 'cacheExpireSecond'
        },
        {
          title: '状态',
          align: 'center',
          key: 'isValid',
          slot: 'status',
        },
      ],
      pageInfo: {
        pageNumber: 1,
        pageSize: 10,
        total: 0
      },
    }
  },
  mounted: function () {

  },
  methods: {
    load() {
      let req = {...this.searchForm, ...this.pageInfo}
      this.loading = true
      list(req).then(res => {
        this.data = res.data.records
        this.pageInfo.total = res.data.total
        this.loading = false
      })
    },
    showEditModel(row) {
      this.$emit("show-edit-modal", row)
    },
    deleteRow(row) {
      remove({id: row.id}).then(res => {
        this.$Message.success('删除成功');
        this.load()
      })
    },
    batchDelete() {

    },
    selectChange(selection) {
      this.selectedRows = selection
    },
    sizeChange(v) {
      this.pageInfo.limit = v
      this.load()
    },
    currentChange(v) {
      this.pageInfo.page = v
      this.load()
    }
  }
}
</script>
